<!-- 1.0 template 主要是放在html元素的(html的页面结构) -->
<template>
    <div>
        <span v-text="msg" class="red"></span>
        <button @click="addd(2,3)">addd</button>
        <button @click="add1(2,3)">add1</button>
        <button @click="sub(3,3)">sub</button>
        <!-- 使用导出常量 -->
        <span>{{PI}}</span> 

    </div>
    
</template>

<script>
    //import calc from './calc.js';     //全部导出对象方式写法

    //按需导入
    import {add,sub,PI} from './calc.js';  //单个函数导出使用方法 

    //定义一个函数
    function addd(x,y) {
        console.log(x+y);
    }

    //module.exports = {  //es5导出方法

    //负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以vue中该定义的元素都可以使用)
    export default{
        data(){         //等价于 es5的 data:function(){}写法
            return {
                msg:'hello vuejs111',
                PI:PI           //导出常量
            }
        },
        methods:{
            addd,     //es6写法  等价于es5 add:add
            add1:add,    //单个函数导出写法 根据上面的 import {add} from 导出的
            //add1:calc.add,
            sub:sub,
           
        },
        created(){

        }
    }
</script>


<style scoped>
/* 当前页面的CSS样式写到这里,其中scoped 表示这个里面写的CSS代码只是在当前组件页面上有效,
不会去影响到其他组件页面 */

.red{
    color:red;
}
</style>



